<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>详情</title>
    <link rel="stylesheet" href="${ctxPath}/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctxPath}/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctxPath}/css/common.css">
    <link rel="stylesheet" href="${ctxPath}/css/topic.css">
</head>
<body>
<jsp:include page="/WEB-INF/pages/commons/header.jsp"></jsp:include>

<%--面包屑导航条--%>
<nav class="list">
    <a href="${ctxPath}/index.jsp">首页</a>
    <i>/</i>
    <b>话题详情</b>
    <p>${messqge_ex}</p>
</nav>

<%--当前页面主要内容--%>
<main class="topic-detail-container">
    <h3 class="topic-title">${topic.title}</h3>
    <div class="topic-author">${topic.author.nickname} 发布于 ${topic.publishTime}</div>
    <c:if test="${not switchs}">
    <a href="${ctxPath}/topic/collect?id=${topic.id}"><div class="btn btn-outline-primary"> 收藏</div></a>
    </c:if>
<c:if test="${ switchs}">
    <a href="${ctxPath}/topic/collect?id=${topic.id}"><div class="btn btn-outline-primary">取消收藏</div></a>
</c:if>
    <div class="topic-content">${topic.content}</div>

        <div class="row open-explain-page">
            <a href="#explain-area" class="col-8 offset-2 btn btn-primary btn-sm">我来解答</a>
        </div>


    <div class="topic-explains">
        <c:if test="${ empty topic.explains }">
            暂无解答
        </c:if>
        <c:if test="${ not empty topic.explains }">
            <c:forEach items="${topic.explains}" var="e" varStatus="x">
                <div class="explain">
                    <div class="row author-and-time">
                        <span class="col-2">${x.count}</span>
                        <span class="col-8">${e.author.nickname} 解答于 ${e.publishTime}</span>
                        <span class="col-2">
                           <a href="/explain/praise?id=${e.id}" class="praise">
                               <i class="fa fa-thumbs-o-up"></i>赞(${e.praise})
                           </a>
                           <a href="/explain/despise?id=${e.id}" class="despise">
                               <i class="fa fa-thumbs-o-down"></i>踩(${e.despise})
                           </a>
                       </span>
                    </div>
                    <div>
                            ${e.content}
                    </div>
                </div>
            </c:forEach>
        </c:if>
    </div>

    <form action="${ctxPath}/explain/publish" method="post">
    <div class="input-group mb-3" id="explain-area">
        <input type="hidden" name="topicId" value="${topic.id}">
        <input type="text" name="explains" id="explains" class="form-control" placeholder="说说你的看法" aria-label="说说你的看法" aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="submit">发表评论</button>
        </div>
    </div>
    </form>
</main>

</body>
</html>
